<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'default',
		navigationBarBackgroundColor: '#FCFCFC',
		navigationBarTextStyle: 'black',
		backgroundColor: '#FCFCFC',
		navigationBarTitleText: '发布共读计划',
	},
}
</route>
<template>
	<view class="page-bookrack">
		<view
			class="w-full flex flex-col box-border pb-[168rpx]"
			style="overflow-y: scroll; background-color: #fcfcfc"
			:style="{ height: contentHeight + 'rpx' }"
		>
			<view class="flex items-center mt-[30rpx]">
				<text class="text-[43rpx] text-[#303030] ml-[48rpx] font-bold">选择共读书目</text>
				<text class="text-[44rpx] text-[#2BA5E0] ml-[15rpx] font-bold">2</text>
				<text class="text-[37rpx] text-[#2BA5E0] font-bold">/3</text>
			</view>
			<view class="flex items-center mt-[20rpx]">
				<text class="text-[28rpx] text-[#303030] mx-[48rpx]"
					>一个班级共读计划最多选择6本书，可跨年级选书 计划发布后图书不可变更</text
				>
			</view>
			<view class="w-[660rpx] pl-[20rpx] pb-[20rpx] mt-[20rpx] ml-[35rpx] releasePlanTwo_Box">
				<view
					class="w-[200rpx] mt-[20rpx] items-center releasePlanTwo_contBox"
					v-for="(item, index) in planInfo.book_List"
					:key="index"
				>
					<view class="w-full releasePlanTwo_Box_imgBox">
						<image
							class="w-[50rpx] h-[50rpx] releasePlanTwo_Box_imgBoxBnt"
							:src="baseImg + '/gdjh_sc.png'"
							@tap="delBook(item.id)"
						/>
						<image
							class="w-full h-[250rpx] rounded-[30rpx]"
							:src="item.cover_img || baseImg + '/img-shangcixuedao.png'"
						></image>
					</view>

					<text
						class="text-[#303030] inline-block max-w-full text-[25rpx] mt-1 font-bold truncate"
						>{{ item.name }}</text
					>
				</view>
				<!-- <view class="w-[200rpx] mt-[20rpx] items-center releasePlanTwo_contBox">
					<view class="w-full releasePlanTwo_Box_imgBox">
						<image
							class="w-[50rpx] h-[50rpx] releasePlanTwo_Box_imgBoxBnt"
							:src="baseImg + '/gdjh_sc.png'"
						/>
						<image
							class="w-full h-[250rpx] rounded-[30rpx]"
							:src="baseImg + '/img-shangcixuedao.png'"
						></image>
					</view>

					<text class="text-[#303030] inline-block max-w-full text-[25rpx] mt-1 font-bold truncate"
						>中国民间故事</text
					>
				</view> -->
				<view
					class="w-[200rpx] mt-[20rpx] items-center releasePlanTwo_contBox"
					v-if="planInfo.book_List.length < 6"
				>
					<view class="w-full h-[250rpx] releasePlanTwo_Box_addBox" @tap="openSpecs">
						<image
							class="w-[65rpx] h-[65rpx] mt-[70rpx] ml-[67.5rpx]"
							:src="baseImg + '/gdjh_addBnt.png'"
						/>
						<text
							class="text-[#ABABAB] inline-block max-w-full text-[25rpx] mt-1 font-bold truncate w-[100%] text-center"
							>添加图书</text
						>
					</view>
					<text class="text-[#303030] inline-block max-w-full text-[25rpx] mt-1 font-bold truncate"
						>&nbsp;
					</text>
				</view>
			</view>
			<view class="mt-[20rpx]">
				<text class="text-[28rpx] text-[#303030] mx-[48rpx]" style="float: right"
					>还可以选{{ 6 - planInfo.book_List.length }}本书</text
				>
			</view>
		</view>
		<view index="2" class="container-6">
			<view
				index="1"
				src=""
				class="title-wrapper"
				style="background-color: #ffd032"
				@tap="toStepOne"
			>
				<text index="0" class="title-9">上一步</text>
			</view>
			<view index="1" src="" class="title-wrapper" @tap="toStepThree">
				<text index="0" class="title-9">下一步</text>
			</view>
		</view>

		<uni-popup ref="popup" type="bottom">
			<view class="w-full h-[80vh] px-6 py-4 box-border">
				<view
					class="w-full bg-white h-full rounded-[30rpx] py-6 box-border flex flex-col justify-center"
				>
					<view class="w-full h-[53rpx] flex justify-between items-center px-6 box-border">
						<image
							:src="baseImg + '/close-btn.png'"
							class="w-[44rpx] h-[44rpx]"
							@tap="closePopup"
						></image>
						<text class="text-[#303030] text-[44rpx]">选择图书</text>
						<view
							class="text-[#fff] text-[29rpx] rounded-[29rpx] h-[53rpx] flex px-4 justify-center items-center"
							style="background: #2ba5e0"
							@tap="confirmSelectBook"
							>{{ allPlanStore.length }}/6确认</view
						>
					</view>
					<!-- 默认弹窗 -->
					<view class="w-full" style="height: calc(100% - 53rpx)">
						<view class="w-full mt-[30rpx] h-[160rpx]">
							<view
								class="mx-[30rpx] h-[70rpx] rounded-[15rpx]"
								style="width: calc(100% - 60rpx); background: #e2e2e2"
							>
								<input
									class="h-[70rpx] ml-[30rpx] text-[28rpx] text-[#303030]"
									style="float: left; width: calc(100% - 30rpx - 120rpx)"
									placeholder="搜索书名、作者"
									placeholder-style="color:#ABABAB"
									@input="input"
									:value="search_context"
								/>
								<!-- 搜索按钮 -->
								<image
									class="h-[35rpx] w-[35rpx] mt-[18rpx] ml-[50rpx]"
									style="display: none; float: left"
									:src="baseImg + '/searchBnt.png'"
								/>
								<!-- 删除按钮 -->
								<image
									class="h-[20rpx] w-[20rpx] mt-[25rpx] ml-[50rpx]"
									style="float: left"
									:src="baseImg + '/book_searchClose.png'"
									@tap="clearInput"
								/>
							</view>
							<view class="block" v-if="search_context">
								<view index="51" class="container">
									<text index="49" class="title">{{ count }}个结果</text>
								</view>
							</view>
							<view class="block" v-else>
								<view index="51" class="container" @tap="openModal('classify', '选择图书分类')">
									<text index="49" class="title">{{ query.classify_name }}</text>
									<image index="47" :src="baseImg + '/beiyueshumu_xxjt.png'" class="icon-down" />
								</view>
								<view index="46" class="container-1" @tap="openModal('grade', '选择年级')">
									<text index="44" class="title-1">{{ query.grade_name }}</text>
									<image index="43" :src="baseImg + '/beiyueshumu_xxjt.png'" class="icon-down-1" />
								</view>
							</view>
						</view>
						<view class="w-full pt-[20rpx] box-border">
							<view class="h-full flex justify-between py-2 box-border">
								<view class="w-full" style="height: 360px">
									<!-- 选中样式 -->
									<scroll-view
										class="w-full"
										:scroll-y="true"
										style="height: 100%"
										v-if="thisPage === 1 && bookList.length"
										@scrolltolower="scrolltolower"
									>
										<view
											class="ml-[35rpx] releasePlanOne_boxMt"
											:class="
												item.is_cache_select && !item.is_store_select
													? 'releasePlanOne_boxAhov'
													: 'releasePlanOne_box'
											"
											v-for="(item, index) in bookList"
											:key="item.id"
											@tap="selectBook(index)"
										>
											<image
												class="w-[152rpx] h-[172rpx] ml-[20rpx] rounded-[30rpx] staudenDetails_topLeftBox_image"
												:src="item.cover_img || baseImg + '/img-shangcixuedao.png'"
											></image>
											<view class="staudenDetails_topLeftBox">
												<view index="13" class="caption-7"
													>{{ item.name
													}}<text class="caption-7-hov" v-if="item.is_store_select"
														>选过</text
													></view
												>
												<image
													class="staudenDetails_topRightBox_image staudenDetails_topRightBox_imageAhov"
													:src="baseImg + '/fabuxz.png'"
												/>
												<view class="title-6">
													<text index="12" class="title-8">{{ item.author }} 编著</text>
												</view>
												<view class="title-jiesao">
													<rich-text :nodes="item.descript" class="title-jiesaoCont"></rich-text>
												</view>
											</view>
										</view>
									</scroll-view>
									<no-page
										v-if="thisPage === 0 || (thisPage === 1 && !bookList.length)"
										height="100%"
										:type="thisPage === 0 ? 'btn' : 'msg'"
										:title="title"
										@click="retry"
									></no-page>
									<!-- 未选中样式 -->
									<!-- <view class="ml-[35rpx] releasePlanOne_boxMt releasePlanOne_box">
										<image
											class="w-[152rpx] h-[172rpx] ml-[20rpx] rounded-[30rpx] staudenDetails_topLeftBox_image"
											:src="baseImg + '/img-shangcixuedao.png'"
										></image>
										<view class="staudenDetails_topLeftBox">
											<view index="13" class="caption-7"
												>中国民间故事<text class="caption-7-hov">选过</text></view
											>
											<image
												class="staudenDetails_topRightBox_image"
												:src="baseImg + '/fabuxz.png'"
											/>
											<view class="title-6">
												<text index="12" class="title-8">陈红烟 编著</text>
											</view>
											<view class="title-jiesao">
												<text index="12" class="title-jiesaoCont"
													>中国民间故事由思维当代童话名家陈伯吹、金近、汤素兰、严文井…</text
												>
											</view>
										</view>
									</view> -->
									<!-- 未选中样式 -->
									<!-- <view class="ml-[35rpx] releasePlanOne_boxMt releasePlanOne_box">
										<image
											class="w-[152rpx] h-[172rpx] ml-[20rpx] rounded-[30rpx] staudenDetails_topLeftBox_image"
											:src="baseImg + '/img-shangcixuedao.png'"
										></image>
										<view class="staudenDetails_topLeftBox">
											<view index="13" class="caption-7">中国民间故事</view>
											<image
												class="staudenDetails_topRightBox_image"
												:src="baseImg + '/fabuxz.png'"
											/>
											<view class="title-6">
												<text index="12" class="title-8">陈红烟 编著</text>
											</view>
											<view class="title-jiesao">
												<text index="12" class="title-jiesaoCont"
													>中国民间故事由思维当代童话名家陈伯吹、金近、汤素兰、严文井…</text
												>
											</view>
										</view>
									</view> -->
								</view>
							</view>
						</view>
					</view>
					<!-- 搜索结果弹窗 -->
					<view class="w-full" style="display: none; height: calc(100% - 53rpx)">
						<view class="w-full mt-[30rpx] h-[160rpx]">
							<view
								class="mx-[30rpx] h-[70rpx] rounded-[15rpx]"
								style="width: calc(100% - 60rpx); background: #e2e2e2"
							>
								<input
									class="h-[70rpx] ml-[30rpx] text-[28rpx] text-[#303030]"
									style="float: left; width: calc(100% - 30rpx - 120rpx)"
									placeholder="搜索书名、作者"
									placeholder-style="color:#ABABAB"
								/>
								<image
									class="h-[20rpx] w-[20rpx] mt-[25rpx] ml-[50rpx]"
									style="float: left"
									:src="baseImg + '/book_searchClose.png'"
								/>
							</view>
							<view class="block">
								<view index="51" class="container">
									<text index="49" class="title">3个结果</text>
								</view>
							</view>
						</view>
						<view class="w-full pt-[20rpx] box-border" style="height: calc(100% - 243rpx)">
							<view class="h-full flex justify-between py-2 box-border">
								<scroll-view scroll-y class="w-full h-full">
									<!-- 未选中样式 -->
									<view class="ml-[35rpx] releasePlanOne_boxMt releasePlanOne_box">
										<image
											class="w-[152rpx] h-[172rpx] ml-[20rpx] rounded-[30rpx] staudenDetails_topLeftBox_image"
											:src="baseImg + '/img-shangcixuedao.png'"
										></image>
										<view class="staudenDetails_topLeftBox">
											<view index="13" class="caption-7"
												>中国民间故事<text class="caption-7-hov">选过</text></view
											>
											<image
												class="staudenDetails_topRightBox_image"
												:src="baseImg + '/fabuxz.png'"
											/>
											<view class="title-6">
												<text index="12" class="title-8">陈红烟 编著</text>
											</view>
											<view class="title-jiesao">
												<text index="12" class="title-jiesaoCont"
													>中国民间故事由思维当代童话名家陈伯吹、金近、汤素兰、严文井…</text
												>
											</view>
										</view>
									</view>
									<!-- 未选中样式 -->
									<view class="ml-[35rpx] releasePlanOne_boxMt releasePlanOne_box">
										<image
											class="w-[152rpx] h-[172rpx] ml-[20rpx] rounded-[30rpx] staudenDetails_topLeftBox_image"
											:src="baseImg + '/img-shangcixuedao.png'"
										></image>
										<view class="staudenDetails_topLeftBox">
											<view index="13" class="caption-7">中国民间故事</view>
											<image
												class="staudenDetails_topRightBox_image"
												:src="baseImg + '/fabuxz.png'"
											/>
											<view class="title-6">
												<text index="12" class="title-8">陈红烟 编著</text>
											</view>
											<view class="title-jiesao">
												<text index="12" class="title-jiesaoCont"
													>中国民间故事由思维当代童话名家陈伯吹、金近、汤素兰、严文井…</text
												>
											</view>
										</view>
									</view>
									<!-- 选中样式 -->
									<view class="ml-[35rpx] releasePlanOne_boxMt releasePlanOne_boxAhov">
										<image
											class="w-[152rpx] h-[172rpx] ml-[20rpx] rounded-[30rpx] staudenDetails_topLeftBox_image"
											:src="baseImg + '/img-shangcixuedao.png'"
										></image>
										<view class="staudenDetails_topLeftBox">
											<view index="13" class="caption-7">中国民间故事</view>
											<image
												class="staudenDetails_topRightBox_image staudenDetails_topRightBox_imageAhov"
												:src="baseImg + '/fabuxz.png'"
											/>
											<view class="title-6">
												<text index="12" class="title-8">陈红烟 编著</text>
											</view>
											<view class="title-jiesao">
												<text index="12" class="title-jiesaoCont"
													>中国民间故事由思维当代童话名家陈伯吹、金近、汤素兰、严文井…</text
												>
											</view>
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupSelect" :mask-click="false" type="bottom" background-color="transparent">
			<view class="w-full h-[824rpx] px-6 py-4 box-border">
				<view
					class="w-full bg-white h-full rounded-[30rpx] py-6 box-border flex flex-col justify-center"
				>
					<view class="w-full h-[53rpx] flex justify-between items-center px-6 box-border">
						<image
							@tap="closeModal"
							:src="baseImg + '/close-btn.png'"
							class="w-[44rpx] h-[44rpx]"
						></image>
						<text class="text-[#303030] text-[44rpx]">{{ modalInfo.title }}</text>
						<view
							class="text-[#fff] text-[29rpx] rounded-[29rpx] h-[53rpx] flex px-4 justify-center items-center"
							style="background: #2ba5e0"
							@tap="confirm"
							>确认</view
						>
					</view>
					<view class="w-full pt-6 box-border" style="height: calc(100% - 243rpx)">
						<view class="h-full flex justify-between py-2 box-border">
							<scroll-view scroll-y class="w-full h-full">
								<view
									v-for="item in modalList"
									:key="item.id"
									@tap="setItem(item.id, item.name)"
									class="w-full flex justify-center items-center mb-2 last:mb-0"
								>
									<view
										class="max-w-full px-[38rpx] h-[54rpx] box-border flex justify-center items-center rounded-[27rpx] text-[#303030] text-[29rpx]"
										:style="{
											background: modalInfo.id == item.id ? '#44C651' : '',
											color: modalInfo.id == item.id ? '#fff' : '#303030',
										}"
										><text class="truncate">{{ item.name }}</text></view
									>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
import { systemInfo } from '@/utils/getSystemInfo';

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);
import { getRecommendBookList, getRecommendClassifyGrade } from '@/service/book';
import { debounce, initializeApp } from '@/utils';
import { usePlanStore } from '@/store/plan';
import { storeToRefs } from 'pinia';
const planStore = usePlanStore();
const { planInfo } = storeToRefs(planStore);
const popup = ref(null);
const popupSelect = ref(null);
function openSpecs() {
	popup.value.open();
	search_context.value = '';
	query.value.classify_id = 0;
	query.value.grade_id = 0;
	query.value.grade_name = '全部';
	query.value.classify_name = '全部';
	getList();
}
const { contentHeight } = systemInfo();

const toStepThree = () => {
	uni.navigateTo({
		url: '/pages/releasePlan/three/index',
	});
};

const cachePlanStore: any = ref([]); //临时选择计划
const allPlanStore: any = ref([]); //全部计划
const bookList = ref([]);
const title = ref('');
const thisPage = ref(-1);
const page = ref({ number: 1, size: 10 });
const hasMore = ref(true);
const classifyList = ref([]);
const gradeList = ref([]);
const query = ref({
	classify_id: 0,
	grade_id: 0,
	grade_name: '全部',
	classify_name: '全部',
	search_context: '',
});
const search_context = ref('');
const count = ref(0);
const modalList = ref([]);
const modalInfo = ref({
	id: 0,
	type: '',
	name: '',
	title: '',
});
const openModal = (type?, title?) => {
	modalInfo.value.type = type;
	modalInfo.value.title = title;
	let id = 0;
	let name = '';
	let list = [];
	if (type === 'grade') {
		id = query.value.grade_id;
		name = query.value.grade_name;
		list = gradeList.value;
	}
	if (type === 'classify') {
		id = query.value.classify_id;
		name = query.value.classify_name;
		list = classifyList.value;
	}
	modalList.value = [{ id: 0, name: '全部' }, ...list];
	modalInfo.value.id = id;
	modalInfo.value.name = name;
	popupSelect.value?.open();
};
const getClassifyGrade = async () => {
	const res = await getRecommendClassifyGrade();
	if (res.status_code === 200) {
		classifyList.value = res.data.book_classify;
		if (res.data.grade_list.length) {
			gradeList.value = res.data.grade_list.map(item => {
				return {
					id: item.grade_id,
					name: item.grade_name,
				};
			});
		}
	}
};

const setItem = (id, name) => {
	modalInfo.value.id = id;
	modalInfo.value.name = name;
};
const scrolltolower = () => {
	console.log('scrolltolower', hasMore.value);
	if (!hasMore.value) return;
	page.value.number++;
	getList();
};
const isObjectInArray = (obj: any, array: any) => {
	return array.some(item => item.id === obj.id);
};
const getList = async () => {
	uni.showLoading({ title: '加载中...' });
	try {
		const res = await getRecommendBookList({
			page: page.value.number,
			page_size: page.value.size,
			classify_id: query.value.classify_id,
			grade_id: query.value.grade_id,
			search_context: search_context.value,
		});
		uni.hideLoading();
		if (res.status_code === 200 && res.data) {
			thisPage.value = 1;
			bookList.value =
				page.value.number === 1 ? res.data.book_list : [...bookList.value, ...res.data.book_list];

			bookList.value = bookList.value.map((item, index) => {
				item.is_cache_select = false;
				item.is_store_select = false;
				if (cachePlanStore.value.length > 0 && isObjectInArray(item, cachePlanStore.value)) {
					item.is_cache_select = true;
					return item;
				}

				if (
					planInfo.value.book_List.length > 0 &&
					isObjectInArray(item, planInfo.value.book_List)
				) {
					item.is_store_select = true;
					return item;
				}

				return item;
			});
			count.value = res.data.count;
			console.log('bookList====>', bookList.value);

			if (res.data.book_list.length < page.value.size) {
				hasMore.value = false;
			}
			if (!bookList.value.length) {
				title.value = '暂无数据';
			}
		} else {
			thisPage.value = 0;
			title.value = res.message;
		}
	} catch (error) {
		console.log('error====>', error);
		uni.hideLoading();
		thisPage.value = 0;
		title.value = '服务器异常';
	}
};
const closeModal = () => {
	modalInfo.value = {
		id: 0,
		type: '',
		name: '',
		title: '',
	};
	popupSelect.value?.close();
};
const confirm = () => {
	const { type } = modalInfo.value;
	if (type === 'classify') {
		query.value.classify_id = modalInfo.value.id;
		query.value.classify_name = modalInfo.value.name;
	}
	if (type === 'grade') {
		query.value.grade_id = modalInfo.value.id;
		query.value.grade_name = modalInfo.value.name;
	}
	page.value.number = 1;
	getList();
	closeModal();
};
const retry = () => {
	hasMore.value = true;
	page.value = { number: 1, size: 10 };
	getList();
};

const currentIndex = ref(0);
const selectBook = (index: number) => {
	currentIndex.value = index;
	if (bookList.value[index].is_store_select) return;
	bookList.value[index].is_cache_select = !bookList.value[index].is_cache_select;

	console.log('=========>bookList.value[index]', bookList.value[index]);

	if (!bookList.value[index].is_store_select) {
		if (bookList.value[index].is_cache_select) {
			cachePlanStore.value.push(bookList.value[index]);
		} else {
			cachePlanStore.value = cachePlanStore.value.filter(
				item => item.id !== bookList.value[index].id,
			);
		}
	}

	allPlanStore.value = [...cachePlanStore.value, ...planInfo.value.book_List];
	console.log('=========>allPlanStore', cachePlanStore.value);
	//planInfo.value.class_id = classList.value[index].class_id;
	//planStore.setPlanInfo({ ...planStore.planInfo, class_id: classList.value[index].id });
};

allPlanStore.value = [...cachePlanStore.value, ...planInfo.value.book_List];

const input = debounce(e => {
	console.log('input====>', e);
	search_context.value = e.detail.value.trim();
	query.value.classify_id = 0;
	query.value.grade_id = 0;
	query.value.grade_name = '全部';
	query.value.classify_name = '全部';
	getList();
}, 500);
const clearInput = () => {
	search_context.value = '';
	query.value.classify_id = 0;
	query.value.grade_id = 0;
	query.value.grade_name = '全部';
	query.value.classify_name = '全部';
	getList();
};
const closePopup = () => {
	cachePlanStore.value = [];
	allPlanStore.value = [...cachePlanStore.value, ...planInfo.value.book_List];
	popup.value?.close();
};
const delBook = (id: number) => {
	planStore.setPlanInfo({
		...planStore.planInfo,
		...{
			book_List: planInfo.value.book_List.filter(item => item.id !== id),
			book_ids: planInfo.value.book_ids.filter(item => item !== id),
		},
	});
};
const confirmSelectBook = () => {
	if (allPlanStore.value.length > 6) {
		//大于6本就不能选择
		uni.showToast({
			icon: 'none',
			title: '最多选择6本书,请删除后再选择',
		});
		return;
	}
	planStore.setPlanInfo({
		...planStore.planInfo,
		...{ book_List: allPlanStore.value, book_ids: allPlanStore.value.map(item => item.id) },
	});
	cachePlanStore.value = [];
	popup.value?.close();
};
const toStepOne = () => {
	uni.navigateTo({
		url: '/pages/releasePlan/one/index',
	});
};
onShow(() => {
	initializeApp(getList(), getClassifyGrade());
});
</script>

<style lang="scss">
page {
	background: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.page-bookrack {
	width: 100%;
	height: 100vh;
}

.releasePlanOne_boxMt {
	float: left;
	width: calc(100% - 70rpx);
	margin-bottom: 20rpx;
}

.releasePlanOne_box {
	display: block;
	padding: 35rpx 0 24rpx;
	background: #fff;
	border: #fff 4rpx solid;
	border-radius: 31rpx;
	box-shadow:
		0 0 4rpx 0 rgb(0 0 0 / 3%),
		0 7rpx 20rpx 0 rgb(0 0 0 / 7%);
	.staudenDetails_topLeftBox .staudenDetails_topRightBox_image {
		visibility: hidden;
	}
}

.releasePlanOne_boxAhov {
	display: block;
	padding: 35rpx 0 24rpx;
	background: #fff;
	border: #33a3e2 4rpx solid;
	border-radius: 31rpx;
	.releasePlanOne_boxAhov {
		visibility: inherit;
	}
}

.staudenDetails_topLeftBox_image {
	float: left;
}

.staudenDetails_topLeftBox {
	float: left;
	width: calc(100% - 172rpx);

	.releasePlanOne_boxAhov {
		visibility: hidden;
	}
	.caption-7 {
		float: left;
		width: calc(100% - 120rpx);
		margin-top: 12rpx;
		margin-left: 15rpx;
		overflow: hidden;
		font-size: 30rpx;
		font-style: normal;
		line-height: 40rpx;
		color: #303030;
		text-align: left;
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.staudenDetails_topRightBox_image {
		// display: none;
		visibility: inherit;
		float: right;
		width: 60rpx;
		height: 60rpx;
		margin-top: 55rpx;
		margin-right: 20rpx;
	}

	.staudenDetails_topRightBox_imageAhov {
		// display: block;
	}

	.title-6 {
		width: calc(100% - 120rpx);
		margin-left: 15rpx;
		overflow: hidden;
		text-align: left;
	}

	.title-7 {
		float: left;
		height: 50rpx;
		padding: 0 20rpx;
		font-size: 25rpx;
		font-style: normal;
		line-height: 50rpx;
		color: #fff;
		background-color: #2ba5e0;
		border-radius: 10rpx;
	}

	.title-8 {
		float: left;
		font-size: 24rpx;
		font-style: normal;
		line-height: 35rpx;
		color: #303030;
	}

	.title-jiesao {
		width: calc(100% - 120rpx);
		margin-top: 15rpx;
		margin-left: 15rpx;
		overflow: hidden;
		text-align: left;

		.title-jiesaoCont {
			display: -webkit-box;
			float: left;
			width: 100%;
			height: 70rpx;
			font-size: 24rpx;
			font-style: normal;
			line-height: 35rpx;
			color: #919191;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: (2);
		}
	}
}

.releasePlanOne_bottomBox {
	display: block;
	float: left;
	width: calc(100% - 50rpx);
	margin: 28rpx 0 0 25rpx;

	.releasePlanOne_bottomBox_text {
		display: inline-block;
		height: 62rpx;
		padding: 0 28rpx;
		margin-right: 13rpx;
		font-size: 26rpx;
		line-height: 62rpx;
		color: #34a4e2;
		background-color: #f3f3f5;
		border-radius: 62rpx;
	}
}

.releasePlanOne_bottomBoxAhov {
	margin-top: 10rpx;
}

.container-6 {
	position: fixed;
	bottom: 0;
	left: 0;
	width: calc(100% - 120rpx);
	height: 166rpx;
	padding: 0 60rpx;
	background-color: #fcfcfc;

	.title-wrapper {
		float: left;
		width: 250rpx;
		height: 83rpx;
		margin: 40rpx 0 0 calc((100% - 500rpx) / 3);
		margin-top: 40rpx;
		overflow: hidden;
		font-size: 33rpx;
		line-height: 83rpx;
		color: #fff;
		text-align: center;
		text-overflow: ellipsis;
		white-space: nowrap;
		background-color: #2ba5e0;
		border-radius: 83rpx;
	}
}

.releasePlanTwo_Box {
	background-color: #fff;
	border-radius: 20rpx;
	box-shadow:
		0 0 4rpx 0 rgb(0 0 0 / 3%),
		0 7rpx 30rpx 0 rgb(0 0 0 / 7%);
}

.releasePlanTwo_Box_imgBox {
	position: relative;
	z-index: 1;
}

.releasePlanTwo_Box_imgBoxBnt {
	position: absolute;
	top: 20rpx;
	left: 20rpx;
	z-index: 2;
}

.releasePlanTwo_Box_addBox {
	background-color: #f6f6f6;
	border-radius: 30rpx;
}

.releasePlanTwo_contBox {
	float: left;
	margin-right: 20rpx;
}

.block {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: flex-start;
	height: 64.5rpx;
	margin-top: 20rpx;
	margin-left: 25rpx;
}

.container {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: center;
	width: auto;
	padding: 6.25rpx 22.3rpx 4.8rpx;
	background-color: #f3f3f5;
	border-radius: 15rpx;
}

.title {
	align-self: center;
	font-size: 26.3rpx;
	font-style: normal;
	line-height: 54.1rpx;
	color: rgb(48 48 48 / 100%);
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
}

.icon-down {
	align-self: center;
	width: 15.2rpx;
	height: 11.1rpx;
	margin: 2rpx 0 0 15.2rpx;
}

.container-1 {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: center;
	width: auto;
	padding: 6.25rpx 22.3rpx 4.8rpx;
	margin-left: 30rpx;
	background-color: #f3f3f5;
	border-radius: 15rpx;
}

.title-1 {
	align-self: center;
	margin-left: 0.6rpx;
	font-size: 26.3rpx;
	font-style: normal;
	line-height: 54.1rpx;
	color: rgb(48 48 48 / 100%);
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
}

.icon-down-1 {
	align-self: center;
	width: 15.2rpx;
	height: 11.1rpx;
	margin: 2rpx 0 0 11.8rpx;
}

.caption-7-hov {
	display: inline-block;
	height: 40rpx;
	padding: 0 20rpx;
	margin-left: 10rpx;
	font-size: 24rpx;
	line-height: 40rpx;
	color: #ababab;
	background-color: #e2e2e2;
	border-radius: 10rpx;
}
</style>
